



import React from 'react';
import ReactDOM from 'react-dom';
// import ReactDOM from 'react-dom/client';



const myReact = (
  function() {
    const stateList = [];
    let index = -1;

    const useState = (inial) => {
      index++;
      let _state;
      const _setState = (val) => {
        _state = val;
        myRednder();
      };
      _state = typeof _state === 'undefined' ? inial : _state;
      stateList[index] = [_state, _setState];
      console.log('statelist', typeof _state, stateList);
      return stateList[index];
    };

    const myRednder = () => {
      index = -1;
      ReactDOM.render(
        <App />,
        document.querySelector('#app'),
      );
    };
    return {
      useState
    };
  }
)();

const { useState } = myReact;

const App = () => {
  const [count, setCount] = useState(3);
  const [flag, setFlag] = useState(false);

  return <div>
    <div>{count}</div>
    <div>{flag ? 'ture' : 'false'}</div>
    <button onClick={() => { setCount(0); }}>归0</button>
    <button onClick={() => { setCount(x => x + 2); }}>+2</button>
    <button onClick={() => { setFlag(x => !x); }}> 取反</button>
  </div>;
};



// ReactDOM.createRoot(document.querySelector('#app')).render(<App />);
ReactDOM.render(
  <App />,
  document.querySelector('#app'),
);
